import config from "./config";
import { generateUniqueId } from "./utils";
import { addCache, getCache, clearCache } from "./cache";
export const originalProto = XMLHttpRequest.prototype;
export const originalOpen = XMLHttpRequest.prototype.open;
export const originalSend = XMLHttpRequest.prototype.send;

// 导出一个名为report的函数，接收一个参数data
// 导出一个report函数，用于上报数据
// 导出一个名为report的函数，接收一个参数data
export function report(data) {
  // 如果config.url不存在，则输出错误信息
  if (!config.url) {
    console.error("report url is required");
  }
  // 将data和generateUniqueId()生成的唯一id组成一个对象，并转换为JSON字符串
  const reportData = JSON.stringify({
    id: generateUniqueId(),
    data,
  });
  // 如果config.isImageUpload为true，则调用imgRequest函数
  // if (config.isImageUpload) {
  //   imgRequest(reportData);
  //   // 否则，如果window.navigator.sendBeacon存在，则调用beaconRequest函数
  // } else {
  //   if (window.navigator.sendBeacon) {
  //     return beaconRequest(reportData);
  //     // 否则，调用xhrRequest函数
  //   } else {
  //     xhrRequest(reportData);
  //   }
  // }
  // if (window.navigator.sendBeacon) {
  //   return beaconRequest(reportData);
  // } else {
  //   if (config.isImageUpload) {
  //     imgRequest(reportData);
  //   } else {
  //     xhrRequest(reportData);
  //   }
  // }

  if (window.navigator.sendBeacon) {
    return beaconRequest(reportData);
  } else {
    xhrRequest(reportData);
  }
}

// 导出一个名为imgRequest的函数，用于发送图片请求
export function imgRequest(data) {
  // 创建一个新的Image对象
  const img = new Image();
  // 设置图片的src属性，将data参数进行编码后拼接到url后面
  // http://127.0.0.1:8080/api?data=encodeURIComponent(data)
  img.src = `${config.url}?data=${encodeURIComponent(JSON.stringify(data))}`;
}

// 导出一个名为xhrRequest的函数，接收一个参数data
export function xhrRequest(data) {
  // 判断浏览器是否支持requestIdleCallback(在浏览器空闲时间执行回调函数)
  if (window.requestIdleCallback) {
    // 如果支持，则使用requestIdleCallback来发送请求
    window.requestIdleCallback(
      () => {
        // 创建一个XMLHttpRequest对象
        const xhr = new XMLHttpRequest();
        // 调用originalOpen方法，设置请求方式为post，请求地址为config.url
        originalOpen.call(xhr, "post", config.url);
        // 调用originalSend方法，发送请求，参数为data的JSON字符串
        originalSend.call(xhr, JSON.stringify(data));
      },
      { timeout: 3000 }
    );
  } else {
    // 如果不支持，则使用setTimeout来发送请求
    setTimeout(() => {
      // 创建一个XMLHttpRequest对象
      const xhr = new XMLHttpRequest();
      // 调用originalOpen方法，设置请求方式为post，请求地址为url
      originalOpen.call(xhr, "post", url);
      // 调用originalSend方法，发送请求，参数为data的JSON字符串
      originalSend.call(xhr, JSON.stringify(data));
    });
  }
}

// 导出一个名为beaconRequest的函数，用于发送数据
export function beaconRequest(data) {
  // 判断浏览器是否支持requestIdleCallback
  if (window.requestIdleCallback) {
    // 如果支持，则使用requestIdleCallback发送数据
    //sendBeacon() 方法可用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器
    window.requestIdleCallback(
      () => {
        window.navigator.sendBeacon(config.url, data);
      },
      { timeout: 3000 }
    );
  } else {
    document.addEventListener("visibilitychange", function logData() {
      if (document.visibilityState === "hidden") {
        window.navigator.sendBeacon(config.url, data);
      }
    });
  }
}

// 导出一个名为lazyReportBatch的函数，用于批量报告数据
export function lazyReportBatch(data) {
  // 将数据添加到缓存中
  addCache(data);
  // 获取缓存中的数据
  const dataCache = getCache();
  console.log("dataCache", dataCache);

  // 如果缓存中的数据长度大于0且大于等于配置中的批量大小
  if (dataCache.length && dataCache.length > config.batchSize) {
    // 报告缓存中的数据,发送请求
    report(dataCache);
    // 清空缓存
    clearCache();
  }
}
